<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="safe-area" :style="{ backgroundColor: color }"></view>
	<!-- #endif -->
</template>

<script>
export default {
	name: 'safe-area',
	props: {
		color: {
			type: String,
			default: ''
		}
	}
};
</script>

<style scoped>
.safe-area {
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>
